<template>
  <div class="app-table-container mt-10">
    <!-- @selection-change="handleSelectionChange" -->
    <el-table v-loading="apiLoading" ref="tableRef" :data="records" :empty-text="$t('selfAnalysis.index.nodata')"
              cell-class-name="app-table-cell app-table-line" class="es-table"
              element-loading-text="Loading" fit
              header-cell-class-name="app-table-head table-head-center" height="100%"
              highlight-current-row
              style="padding-bottom: 15px" tooltip-effect="light" width="100%" v-bind="$attrs">
      <!-- <el-table-column type="selection" width="50" align="center" /> -->

      <slot></slot>

    </el-table>
  </div>

</template>

<script lang="ts" setup>
import Dialog from './dialog/dialog.vue'
import {ref, reactive, toRefs, unref, onMounted} from 'vue'
import {Plus, Edit, Delete, Connection, Search, Refresh, FolderAdd, MoreFilled} from '@element-plus/icons-vue'
import {ElForm, ElMessage, ElMessageBox} from "element-plus/es";
import {useI18n} from 'vue-i18n'
import {Script} from "@/services/deviceDeviceLibrary/script";
import {baseServiceEnum} from "@/services/enum";
import {storeToRefs} from "pinia";
import {useApiStore} from "@/stores/modules/apiStore/apiStore";
import {FolderEnum} from "@/pages/components/enum";
import {BaseService} from "@/services/baseService";
import lodash from "lodash";

const apiStore = useApiStore()
const {apiLoading} = storeToRefs(apiStore);
const {t} = useI18n()
const tableRef = ref();
const props = defineProps({
  /**
   * 数据获取方法。该方法的返回值暂时仅支持Promise和简单对象
   * 返回简单对象时，对象的格式必须为{total: 0, records: []}
   * 返回Promise时，resolve的格式必须为{total: 0, records: []}
   */
  dataGetter: {
    type: Function,
    default: () => {
      return function () {
        return {
          total: 0,
          records: []
        };
      };
    }
  },
  /**
   * 是否挂载后立即获取数据
   */
  immediately: {
    type: Boolean,
    default: true
  },
  iconName: {
    type: String,
    default: 'icon-jiaoben'
  }
})
const {iconName} = toRefs(props)

const state = reactive({
  records: [],
  loading: false
})
const {records} = toRefs(state)

onMounted(() => {
  if (props.immediately) {
    getTableData();
  }
})

const getTableData = () => {
  state.loading = true;
  const result = props.dataGetter();
  console.log(result)
  if (lodash.isPlainObject(result)) {
    state.records = result.records || [];
    state.loading = false;
  } else if (result instanceof Promise) {
    result
        .then(res => {
          console.log(res)
          state.records = res || [];
        })
        .catch(() => {
          state.records = [];
        })
        .finally(() => {
          state.loading = false;
        });
  }
}
const reload = () => {
  getTableData();
}
const reloadCurrentPage = () => {
  getTableData();
}
const setLoadding = (porps) => {
  state.loading = porps;
}

const clearSelection = () => {
  unref(tableRef).clearSelection();
}

const toggleRowSelection = (val) => {
  unref(tableRef).toggleRowSelection(val);
}
const setCurrentRow = (val) => {
  unref(tableRef).setCurrentRow(val);
}

const toggleSelection = (rows = []) => {
  rows?.forEach((row) => {
    // TODO: improvement typing when refactor table
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    unref(tableRef)?.toggleRowSelection(row, undefined)
  })
}
defineExpose({
  //重新加载
  reload,
  //重新加载（当前页）
  reloadCurrentPage,
  //设置loading
  setLoadding,
  //清除选中
  clearSelection,
  //用于多选表格，切换某一行的选中状态， 如果使用了第二个参数，则可直接设置这一行选中与否
  toggleRowSelection,
  //用于单选表格，设定某一行为选中行， 如果调用时不加参数，则会取消目前高亮行的选中状态。
  setCurrentRow


})

</script>

<style scoped>
</style>

